<template>
   <van-tabbar v-model="active" active-color="#35DE15">
        <van-tabbar-item icon="home-o">
          <span>首页</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <svg
              viewBox="0 0 48 48"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="24"
              height="24"
            >
              <title>首页</title>
              <g
                id="首页"
                stroke="none"
                stroke-width="1"
                :fill="props.active | fill"
                fill-rule="evenodd"
              >
                <g
                  id="分组"
                  transform="translate(-0.046875, -0.046875)"
                  fill="#F5F7FF"
                  fill-rule="nonzero"
                  opacity="0"
                >
                  <rect
                    id="Rectangle"
                    x="3.046875"
                    y="3.046875"
                    width="42"
                    height="42"
                  ></rect>
                </g>
                <path
                  d="M28.2259749,6.86867066 C27.0721938,5.78878444 25.5984704,5.24900406 24.1248451,5.24927146 C22.6512197,5.24953885 21.1776923,5.78985402 20.0243031,6.87015888 L5.74064304,20.2528534 C5.41818706,20.5787662 5.16082677,20.9448543 4.95562911,21.3629209 C4.66402939,21.9283683 4.5,22.5700583 4.5,23.25 L4.5,37.5 C4.5,39.1568542 5.17157288,40.6568542 6.25735931,41.7426407 C7.34314575,42.8284271 8.84314575,43.5 10.5,43.5 L37.5,43.5 C39.1568542,43.5 40.6568542,42.8284271 41.7426407,41.7426407 C42.8284271,40.6568542 43.5,39.1568542 43.5,37.5 L43.5,23.25 C43.5,22.9346683 43.464835,22.6275558 43.3806292,22.2388153 C43.241821,21.3651394 42.8216817,20.5295822 42.1258653,19.87833 L28.2259749,6.86867066 Z"
                  id="合并形状"
                  :stroke="props.active | stroke"
                  :stroke-width="props.active ? '0' : '3'"
                  fill-rule="nonzero"
                ></path>
                <path
                  d="M14.578125,27 C14.578125,29.7441649 18.7964421,33.234375 24,33.234375 C29.2035579,33.234375 33.421875,29.7441649 33.421875,27"
                  id="路径"
                  :stroke="props.active | stroke"
                  stroke-width="3"
                  stroke-linecap="round"
                  fill-rule="nonzero"
                ></path>
              </g>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item icon="search" >
          <span>分类</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <svg
              viewBox="0 0 48 48"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="24"
              height="24"
            >
              <title>分类</title>
              <g
                id="分类"
                stroke="none"
                stroke-width="1"
                fill-rule="evenodd"
                :fill="props.active | fill"
              >
                <g id="分组" transform="translate(-0.046875, -0.046875)"></g>
                <g
                  id="分组-2"
                  transform="translate(-0.328125, -0.187500)"
                  fill-rule="nonzero"
                  :stroke="props.active | stroke"
                  :stroke-width="props.active ? '0' : '2.94'"
                >
                  <path
                    d="M14.4959282,5.3904392 C12.1709651,5.39032716 10.0662597,6.33441016 8.54275207,7.86054376 C7.01832889,9.38759444 6.07573811,11.4973144 6.07585007,13.8275643 C6.07599291,16.8003566 8.74835988,19.8273968 13.8056663,23.330432 C14.0149952,23.4723539 14.2560325,23.5430017 14.4970709,23.5430056 C14.7384334,23.5430095 14.9797971,23.4721794 15.1885072,23.3305147 C20.1371869,19.9715347 22.9172462,16.8698326 22.9171001,13.8286588 C22.9169881,11.498331 21.9741415,9.38846221 20.4495249,7.86121786 C18.9258237,6.33489044 16.8209695,5.39055125 14.4959282,5.3904392 Z"
                    id="椭圆形-copy"
                    transform="translate(14.496475, 14.467314) rotate(-45.000000) translate(-14.496475, -14.467314) "
                  ></path>
                  <path
                    d="M34.1241588,5.38365458 C31.7991175,5.38376663 29.6942634,6.32810582 28.1705622,7.85443324 C26.6459456,9.38167759 25.7030989,11.4915463 25.702987,13.8218742 C25.7028441,16.7945774 28.3748712,19.8212688 33.4316006,23.3236704 C33.6409305,23.4655831 33.8819691,23.5362228 34.1230065,23.536219 C34.364368,23.5362151 34.6057284,23.4653775 34.8144331,23.3237067 C39.7636755,19.964112 42.5440908,16.8620458 42.544237,13.8207796 C42.5443489,11.4905298 41.6017582,9.38080982 40.077335,7.85375914 C38.5538273,6.32762554 36.4491219,5.38354254 34.1241588,5.38365458 Z"
                    id="椭圆形-copy-2"
                    transform="translate(34.123612, 14.460530) rotate(-315.000000) translate(-34.123612, -14.460530) "
                  ></path>
                  <path
                    d="M34.1230651,24.8805899 C31.798102,24.8804779 29.6933966,25.8245609 28.169889,27.3506945 C26.6454658,28.8777452 25.702875,30.9874652 25.702987,33.317715 C25.7031298,36.2905073 28.3754968,39.3175475 33.4328032,42.8205827 C33.6421321,42.9625046 33.8831694,43.0331524 34.1242078,43.0331563 C34.3655703,43.0331602 34.606934,42.9623301 34.8156441,42.8206654 C39.7643238,39.4616854 42.5443831,36.3599833 42.544237,33.3188095 C42.544125,30.9884817 41.6012784,28.8786129 40.0766618,27.3513686 C38.5529606,25.8250412 36.4481064,24.880702 34.1230651,24.8805899 Z"
                    id="椭圆形-copy-4"
                    :stroke="props.active ? '#27D817' : '#575757'"
                    fill="#fff"
                    stroke-width="2.94"
                    fill-rule="nonzero"
                    transform="translate(34.123612, 33.957465) rotate(-225.000000) translate(-34.123612, -33.957465) "
                  ></path>
                  <path
                    d="M14.4902367,24.9255934 C12.1651953,24.9257054 10.0603412,25.8700446 8.53664,27.396372 C7.01202342,28.9236164 6.06917677,31.0334851 6.06906481,33.363813 C6.06892198,36.3365162 8.74094907,39.3632076 13.7976785,42.8656092 C14.0070084,43.0075219 14.2480469,43.0781616 14.4890844,43.0781578 C14.7304459,43.0781539 14.9718063,43.0073163 15.1805109,42.8656455 C20.1297534,39.5060508 22.9101687,36.4039846 22.9103148,33.3627184 C22.9104268,31.0324686 21.967836,28.9227486 20.4434128,27.3956979 C18.9199051,25.8695643 16.8151998,24.9254813 14.4902367,24.9255934 Z"
                    id="椭圆形-copy-3"
                    transform="translate(14.489690, 34.002468) rotate(-135.000000) translate(-14.489690, -34.002468) "
                  ></path>
                </g>
              </g>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item icon="friends-o">
          <span>购物车</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <svg
              viewBox="0 0 48 48"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="24"
              height="24"
            >
              <title>购物车</title>
              <g
                id="购物车"
                stroke="none"
                stroke-width="1"
                :fill="props.active | fill"
                fill-rule="evenodd"
              >
                <path
                  d="M40.3125,14.0625 L11.53125,14.0625 C10.6510462,14.0625 9.85417118,14.4192731 9.27734713,14.9960971 C8.70052309,15.5729212 8.34375,16.3697962 8.34375,17.25 L8.34682366,21.0235727 C8.4350771,25.3956643 10.4223674,29.334486 13.5633675,32.1839846 C16.746043,35.0712908 21.111045,36.84375 25.921875,36.84375 C30.635536,36.84375 34.9210049,35.1421325 38.0885486,32.3552387 C41.2196254,29.6004294 43.2569425,25.7822665 43.4997524,21.516809 L43.5,17.249913 C43.5,16.3697962 43.1432269,15.5729212 42.5664029,14.9960971 C41.9895788,14.4192731 41.1927038,14.0625 40.3125,14.0625 Z"
                  id="合并形状"
                  :stroke="props.active | stroke"
                  :stroke-width="props.active ? '0' : '3'"
                  fill-rule="nonzero"
                ></path>
                <path
                  d="M4.546875,4.546875 L6.4453125,4.546875 C7.48084641,4.546875 8.3203125,5.38634109 8.3203125,6.421875 L8.3203125,19.6318058 L8.3203125,19.6318058"
                  id="路径-2"
                  :stroke="props.active ? '#35DE15' : '#575757'"
                  stroke-width="3"
                  stroke-linecap="round"
                  fill-rule="nonzero"
                ></path>
                <rect
                  id="矩形"
                  :fill="props.active ? '#fff' : '#575757'"
                  fill-rule="nonzero"
                  x="15.609375"
                  y="22.546875"
                  width="20.625"
                  height="3"
                  rx="1.5"
                ></rect>
                <g
                  id="分组-2"
                  transform="translate(9.562500, 38.343750)"
                  :fill="props.active ? '#35DE15' : '#575757'"
                  fill-rule="nonzero"
                >
                  <circle id="椭圆形" cx="3" cy="3" r="3"></circle>
                  <circle id="椭圆形-copy" cx="29.71875" cy="3" r="3"></circle>
                </g>
              </g>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o">
          <span>我的</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <svg
              t="1628060537756"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10162"
              width="20"
              height="20"
            >
              <path
                d="M63.647425 1018.763497a38.323353 38.323353 0 0 0 32.706683-19.13715 481.59885 481.59885 0 0 1 829.084359 0 38.323353 38.323353 0 0 0 32.700551 19.131018 38.323353 38.323353 0 0 0 32.400096-58.171784 561.385006 561.385006 0 0 0-298.695282-243.301174c153.661317-82.931737 231.356551-259.642251 188.587689-428.933365C837.662659 119.053796 685.368719 0.447617 510.749126 0.447617c-174.607329 0-326.907401 118.612311-369.670132 287.903425-42.768862 169.297246 34.926371 346.001629 188.587689 428.933365a561.483114 561.483114 0 0 0-298.566515 243.380886 38.323353 38.323353 0 0 0 32.547257 58.098204z"
                :fill="props.active ? '#35DE15' : '#575757'"
                p-id="10163"
              ></path>
              <path
                d="M205.854659 379.787497c0.91976-168.260982 137.908886-303.999234 306.169868-303.373796 168.260982 0.637701 304.23224 137.406084 303.88273 305.667065-0.349509 168.260982-136.891018 304.459114-305.152 304.391665a305.869413 305.869413 0 0 1-305.029365-306.709461l0.122635 0.024527z"
                :fill="props.active ? '#35DE15' : '#fff'"
                p-id="10164"
              ></path>
              <path
                d="M510.755257 584.152144a192.867641 192.867641 0 0 0 143.433581-64.640767 37.379066 37.379066 0 0 0-2.838994-53.321581 38.709653 38.709653 0 0 0-54.112575 2.814467 114.172934 114.172934 0 0 1-172.964023 0 38.703521 38.703521 0 0 0-54.112575-2.814467 37.354539 37.354539 0 0 0-2.838994 53.321581 192.79406 192.79406 0 0 0 143.43358 64.640767z"
                :fill="props.active ? '#fff' : '#575757'"
                p-id="10165"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
</template>

<script>

import Vue from 'vue'
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
    data(){
  return{
     active: 0,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
  }
},
filters: {
    fill(active) {
      return active ? "#35DE15" : "#fff";
    },
    stroke(active) {
      return active ? "#fff" : "#575757";
    },
  },
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/border.styl'
@import '~@/assets/stylus/ellipsis.styl'


</style>